<!--
 * @Descripttion: 
 * @Author: YuZhenJing
 * @Date: 2020-01-30 17:53:25
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-20 15:21:34
 -->
<template>
  <div class="org-list">
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card body-style="padding:8px;">
          <div class="tree-box" v-loading="treeLoading">
            <el-input
              class="input-with-select"
              clearable
              placeholder="输入想查询的机构进行过滤"
              style="margin-bottom:10px;"
              v-model="filterText"
            >
              <el-select
                @change="changeStatus"
                clearable
                slot="prepend"
                v-model="orgStatus"
              >
                <el-option
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                  v-for="item in orgStatusOptions"
                ></el-option>
              </el-select>
            </el-input>
            <div style="height:calc(100vh - 145px);overflow-x: auto;">
              <el-tree
                :data="orgData"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                :render-content="renderContent"
                @node-click="orgNodeClick"
                default-expand-all
                highlight-current
                node-key="orgCode"
                ref="orgTree"
              ></el-tree>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card body-style="padding:8px">
          <div class="details-box">
            <el-divider content-position="left">
              <span class="text-h6">详细信息</span>
            </el-divider>
            <div style="padding:10px" v-if="details.orgCode">
              <el-form :model="details">
                <el-row :gutter="12">
                  <el-col :lg="12" :md="24">
                    <el-form-item label="排序标识:">
                      <el-input
                        disabled
                        v-model="details.orgOrderNumber"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="12" :md="24">
                    <el-form-item label="组织机构名称:">
                      <el-input disabled v-model="details.orgName"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="12" :md="24">
                    <el-form-item label="组织机构状态:">
                      <el-input
                        disabled
                        v-model="details.orgStatusName"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="12" :md="24">
                    <el-form-item label="创建人姓名:">
                      <el-input
                        disabled
                        v-model="details.creatorPersonName"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :lg="12" :md="24">
                    <el-form-item label="创建人时间:">
                      <el-input
                        disabled
                        v-model="details.creatorDate"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div v-else>
              <el-card
                body-style="height:120px;line-height:120px;text-align:center"
              >
                <span class="text-h6">选择左侧组织机构，查看详细信息</span>
              </el-card>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <org-add
      :orgStatusOptions="orgStatusOptions"
      @orgTreeData="orgTreeData"
      ref="orgAddRef"
    ></org-add>
    <org-edit @orgTreeData="orgTreeData" ref="orgEditRef"></org-edit>
  </div>
</template>
<script>
import * as orgService from '@/service/org'
export default {
  components: {
    'org-add': require('@/components/module/org/OrgAdd').default,
    'org-edit': require('@/components/module/org/OrgEdit').default
  },
  watch: {
    filterText(val) {
      this.$refs.orgTree.filter(val)
    }
  },
  data() {
    return {
      // 组织机构树区域加载状态
      treeLoading: false,
      // 选择的组织机构状态
      orgStatus: '',
      // 组织机构数据集
      orgStatusOptions: [],
      // 过滤文本
      filterText: '',
      // 组织机构数据
      orgData: [],
      // 功能清单详情
      details: {},
      // 授权项
      auth: {
        list: 'ORGLBCX',
        del: 'SCORG',
        edit: 'BJORG',
        addParent: 'XZFJORG',
        add: 'XZORG'
      }
    }
  },
  methods: {
    ...orgService,
    // 单击节点
    orgNodeClick(data) {
      if (data.isRoot) {
        this.details = {}
      } else {
        this.details = data
      }
    },
    // 过滤节点
    filterNode(value, data) {
      let status = true
      if (this.orgStatus) {
        status = data.orgStatus == this.orgStatus
      }
      if (!value) return status
      return status && data.orgName.indexOf(value) !== -1
    },
    //增加下级菜单
    handleCommand(command, data, parentData) {
      if (command == 'addOrg') {
        this.$refs.orgAddRef.show(data)
      } else if (command == 'delete') {
        this.delOrg(data)
      } else if (command == 'editOrg') {
        this.$refs.orgEditRef.show(data)
      } else if (command == 'start') {
        this.updateStatus('start', data, parentData)
      } else if (command == 'stop') {
        this.updateStatus('stop', data, parentData)
      }
    },
    // 自定义节点
    renderContent(h, { node, data, store }) {
      let _dropdownItem = nodeType => {
        if (nodeType == 'add' && data.orgStatus != 'stop') {
          return (
            <el-dropdown-item icon="el-icon-folder-add" command="addOrg">
              增加下级机构
            </el-dropdown-item>
          )
        }
        if (!data.isRoot) {
          if (nodeType == 'edit') {
            return (
              <el-dropdown-item icon="el-icon-edit" command="editOrg">
                编辑组织机构
              </el-dropdown-item>
            )
          }
          if (nodeType == 'del' && data.orgStatus == 'designing') {
            return (
              <el-dropdown-item icon="el-icon-delete" command="delete">
                删除组织机构
              </el-dropdown-item>
            )
          }
          if (
            nodeType == 'start' &&
            (data.orgStatus == 'start' || data.orgStatus == 'designing')
          ) {
            return (
              <el-dropdown-item icon="el-icon-star-off" command="stop">
                停用组织机构
              </el-dropdown-item>
            )
          }
          if (
            nodeType == 'stop' &&
            (data.orgStatus == 'stop' || data.orgStatus == 'designing')
          ) {
            return (
              <el-dropdown-item icon="el-icon-star-off" command="start">
                启用组织机构
              </el-dropdown-item>
            )
          }
        }
      }
      let _iconStatus = status => {
        if (status == 'start') {
          return 'el-icon-sunny'
        } else if (status == 'stop') {
          return 'el-icon-moon'
        } else if (status == 'designing') {
          return 'el-icon-sunset'
        }
      }
      return (
        <span class="custom-tree-node">
          <span>
            {h('span', [
              h('i', {
                class: _iconStatus(data.orgStatus)
              }),
              h('span', data.orgName)
            ])}
          </span>
          <span>
            <el-dropdown
              trigger="click"
              placement="top"
              on-command={command =>
                this.handleCommand(command, data, node.parent.data)
              }
            >
              <span class="el-dropdown-link">
                <i class="el-icon-s-operation text-primary"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="asm-body">
                {_dropdownItem('add')}
                {_dropdownItem('edit')}
                {_dropdownItem('del')}
                {_dropdownItem('start')}
                {_dropdownItem('stop')}
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </span>
      )
    }
  },
  mounted() {
    this.searchOrgStatusOptions()
  }
}
</script>
<style lang="stylus" scope>
.input-with-select .el-input-group__prepend
  background-color #fff
  .el-select .el-input
    width 95px
.custom-tree-node
  flex 1
  display flex
  align-items center
  justify-content space-between
  font-size 14px
  padding-right 8px
  .el-dropdown-link
    font-size 16px
.tree-box
  height calc(100vh - 100px)
.details-box
  height calc(100vh - 123px)
</style>
